import React from "react";
import { useDispatch, useSelector } from "react-redux";

import TodoAdd from "./components/TodoAdd";
import TodoList from "./components/TodoList";

import { increment, decrement } from "./store/features/counterSlice";

export default function App() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();
  return (
    <div>
      <TodoAdd />
      <TodoList />
      <hr />
      <h1>App - {count}</h1>
      <button
        onClick={() => {
          dispatch(increment());
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(decrement());
        }}
      >
        -
      </button>
    </div>
  );
}
